<template>
  <div class="full-box">
    <banner></banner>
    <div class="common-layout">
      <el-container>
        <el-aside width="200px">
          <navigation/>
        </el-aside>
        <el-main>
          <breadcrumb/>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script lang="ts">
import banner from '@/components/banner.vue'
import navigation from '@/components/navigation.vue'
import breadcrumb from '@/components/breadcrumb.vue'

export default {
  name: 'home',
  components: {
    banner, navigation, breadcrumb
  },

  data() {
    return {
      menu: {
        name: '主菜单'
      },
      path: {
        current: 'main',
        child: true,
      },
    }
  },

  created: function () {

  },

  methods: {
    menuClick: function (menu) {
      console.log('application ' + menu.path + ' was choose');
      this.menu = menu;
      let route = '';
      if(this.path.child){
        route = this.path.current + '/' + menu.path;
        this.path.child = false;
      }else {
        route = menu.path;
      }
      console.log('route = ' + route);
      this.$router.push(route);
    }
  }
}
</script>

<style>
.content-card {
  background-color: #f5f5f5;
}
.menu-title {
  margin-top: 30px;
  margin-left: 40px;
  width: 100%;
  height: 60px;
  line-height: 40px;
  text-align: left;
  font-size: 20px;
}
</style>
